<template>
    <xn-form-container
        :title="formData.id ? '编辑分组管理' : '增加分组管理'"
        :width="700"
        v-model:open="open"
        :destroy-on-close="true"
        @close="onClose"
    >
        <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
            <a-form-item label="分组名称：" name="groupName">
                <a-input v-model:value="formData.groupName" placeholder="请输入分组名称" allow-clear />
            </a-form-item>
            <a-form-item label="选择人：" name="selectPerson">
				<a-transfer
					:data-source="mockData"
					show-search
					:filter-option="filterOption"
					:target-keys="targetKeys"
					:render="item => item.title"
					@change="handleChange"
					@search="handleSearch"
					:list-style="{ width: '50%', height: '600px' }"
				/>
<!--                <a-input v-model:value="formData.selectPerson" placeholder="请输入选择人" allow-clear />-->
            </a-form-item>
            <a-form-item label="是否公开：" name="isPbulic">
                <a-radio-group v-model:value="formData.isPbulic" placeholder="请选择是否公开" :options="isPbulicOptions" />
            </a-form-item>
        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
        </template>
    </xn-form-container>
</template>

<script setup name="bizGroupManagementForm">
    import tool from '@/utils/tool'
    import { cloneDeep } from 'lodash-es'
    import { required } from '@/utils/formRules'
    import bizGroupManagementApi from '@/api/biz/bizGroupManagementApi'
    // 抽屉状态
    const open = ref(false)
    const emit = defineEmits({ successful: null })
    const formRef = ref()
    // 表单数据
    const formData = ref({})
    const submitLoading = ref(false)
    const isPbulicOptions = ref([])

    // 打开抽屉
    const onOpen = (record) => {
        open.value = true
        if (record) {
            let recordData = cloneDeep(record)
            formData.value = Object.assign({}, recordData)
        }
        isPbulicOptions.value = tool.dictList('COMMON_WHETHER')
    }
    // 关闭抽屉
    const onClose = () => {
        formRef.value.resetFields()
        formData.value = {}
        open.value = false
    }
    // 默认要校验的
    const formRules = {
    }
    // 验证并提交数据
    const onSubmit = () => {
		debugger
        formRef.value.validate().then(() => {
            submitLoading.value = true
            const formDataParam = cloneDeep(formData.value)
            bizGroupManagementApi
                .bizGroupManagementSubmitForm(formDataParam, formDataParam.id)
                .then(() => {
                    onClose()
                    emit('successful')
                })
                .finally(() => {
                    submitLoading.value = false
                })
        })
    }


	const mockData = ref([]);
	const targetKeys = ref([]);

	onMounted(() => {
		getMock();
	});

	const getMock = () => {
		const keys = [];
		const mData = [];
		for (let i = 0; i < 40; i++) {
			const data = {
				key: i.toString(),
				title: `content${i + 1}`,
				description: `description of content${i + 1}`,
				chosen: Math.random() * 2 > 1,
			};
			if (data.chosen) {
				keys.push(data.key);
			}
			mData.push(data);
		}
		mockData.value = mData;
		targetKeys.value = keys;
	};

	const filterOption = (inputValue, option) => {
		return option.description.indexOf(inputValue) > -1;
	};

	const handleChange = (keys, direction, moveKeys) => {
		console.log(keys, direction, moveKeys);
		formData.value.selectPerson = keys.toString();
		targetKeys.value = keys;
	};

	const handleSearch = (dir, value) => {
		console.log('search:', dir, value);
	};
    // 抛出函数
    defineExpose({
        onOpen
    })
</script>
